<template>
	<view v-if="relatedListAll.length > 1" class="relatedBox">
		<!-- <image class="isBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/center_bg.png"></image> -->
		<view class="isTitle">{{title}}</view>
		<view class="isDesc">基于你的观看历史计算</view>
		<view class="content">
			<div v-for="(item, index) in listAll" :key="index" class="jjItemBox">
				<jjItem :nowItem="item"></jjItem>
			</div>
			<view class="flex align-center justify-center btn-set" @tap="changeIndex">
				<image style="margin-top: 6rpx;" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/change_icon1.png"></image>
				<text>换一换</text>
			</view>
		</view>
	</view>
</template>

<script>
	function deepClone(source) {
		if (!source && typeof source !== 'object') {
			throw new Error('error arguments', 'deepClone')
		}
		const targetObj = source.constructor === Array ? [] : {}
		Object.keys(source).forEach(keys => {
			if (source[keys] && typeof source[keys] === 'object') {
			targetObj[keys] = deepClone(source[keys])
			} else {
			targetObj[keys] = source[keys]
			}
		})
		return targetObj
	}
	import jjItem from './jjItem.vue';
	export default {
		props:{
			title:{
				default:'猜你喜欢',
				type:String
			},
			list:{
				default:()=>{
					return []
				},
				type:Array
			}
		},
		components: {jjItem},
		data() {
			return {
				relatedListAll:[],
				relatedIndex: 0,
				nowIndex: 0
			}
		},
		computed: {
			listAll() {
				let list = this.relatedListAll ? deepClone(this.relatedListAll) : []
				return list && list.splice(this.nowIndex, 3)
			}
		},
		methods: {
			changeIndex() {
				let allLength = this.relatedListAll.length
				if(this.nowIndex === 0) {
					this.nowIndex = 3
				} else if(this.nowIndex + 3 < allLength) {
					this.nowIndex += 3
					
				} else {
					this.nowIndex = 0
				}
			},
			isChangeRelated() {
				this.$uma && this.$uma.trackEvent('Ume_page1_control', {
					name: 'Ume_page1_control_change'
				});
				this.getBannerList();
			},
			getBannerList() {
				this.relatedListAll = this.list.map((item, index) => {
					item = item.contentInfo;
					item['index'] = index;
					return item;
				});
			},
			toDetail(item,type) {
				if(type =='mayLike'){
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_like'
					});
				}else if(type == 'hot'){
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_hot'
					});
				}
				console.log('item', item);
				this.zwyRouter(`/pages/video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
			}
		},
		created() {
			this.getBannerList();
		}
	}
</script>

<style lang="scss" scoped>
	.isBg{
		width: 100%;
		height: 82rpx;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 0;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.relatedBox{
		.isDesc{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #B5B5B5;
		}
		.isTitle{
			padding-top: 41rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 42rpx;
			color: #333333;
			margin-bottom: 3rpx;
		}
		width: 710rpx;
		padding-bottom: 42rpx;
		margin-bottom: 30rpx;
		position: relative;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/index_bg_center1.png') no-repeat center center;
		background-size: 100% 100%;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 50rpx;
		overflow: hidden;
	}

	.btn-set {
		width: 630rpx;
		margin: 0 auto;
		height: 88rpx;
		border-radius: 45rpx;
		color: #999999;
		background: #F4F4F8;
		margin-top: 28rpx;
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 11rpx;
		}
	}
</style>
